<template>
	<view style="display: flex;flex-direction: column;align-items: center;">
		<!-- 教练基本信息 -->
		<view style="width: 702rpx;display: flex;justify-content: space-between;align-items: center;margin-top: 60rpx;">
			<view style="display: flex;align-items: center;">
				<!-- 头像 -->
				<image mode="aspectFill" :src="teachierData.thumbnail" style="width:100rpx;height: 100rpx;border-radius: 50%;"></image>
				<!-- 基本信息 -->
				<view style="display: flex;flex-direction: column;padding-left: 28rpx; width: 480rpx;">
					<!-- 姓名和星级 -->
					<view style="display: flex;">
						<!-- 姓名 -->
						<text style="font-size: 32rpx;color: #333333;">{{ teachierData.post_title }}</text>
						<!-- 星级 -->
						<u-rate :count="rateCount" v-model="teachierData.star" :disabled="true" :size="18" style="margin-left: 26rpx;"></u-rate>
					</view>
					<!-- 科目和学员数量 -->
					<view style="display: flex;font-size: 26rpx;margin-top: 30rpx;">
						<!-- 科目 -->
						<text style="color: #666666;">{{ teachierData.zhiwu }}</text>
					</view>
					<view class="" style="display: flex;font-size: 26rpx;margin-top: 10rpx; align-items: center;">
						<text style="color: #666666;">执教{{ teachierData.year }}年</text>
						<!-- 学员人数 -->
						<text style="color: #666666;margin-left: 30rpx;">{{ teachierData.students }}</text>
						<text style="color: #666666;">名学员</text>
					</view>
					<!-- 标签 -->
					<view style="display: flex; margin-top: 10rpx;flex-wrap: wrap;">
						<block v-for="(item, index) in teachierData.post_keywords" :key="index">
							<view style=" display: flex;align-items: center;margin-right: 40rpx;" v-if="item">
								<view style="width: 8rpx;height: 8rpx;background-color: #CCCCCC;border-radius: 50%;"></view>
								<text style="font-size: 26rpx;color: #666666;margin-left: 10rpx;">{{ item }}</text>
							</view>
						</block>
					</view>
					<view style="display: flex; margin-top: 10rpx;flex-wrap: wrap;">
						<block v-for="(item, index) in teachierData.car_model" :key="index">
							<view style=" display: flex;align-items: center;margin-right: 40rpx;" v-if="item">
								<view style="width: 8rpx;height: 8rpx;background-color: #CCCCCC;border-radius: 50%;"></view>
								<text style="font-size: 26rpx;color: #666666;margin-left: 10rpx;">{{ item }}</text>
							</view>
						</block>
					</view>
				</view>
			</view>
			<!-- 右侧信息 -->
			<view style="height: 100%; display: flex;flex-direction: column;align-self: flex-start;">
				<text style="font-size: 30rpx;color: #666666;">{{ teachierData.driver_school }}</text>
			</view>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 2px;background-color: #F0F2F5;margin-top: 39rpx;"></view>

		<!-- 教练风采标题 -->
		<text style="width: 702rpx; font-size: 34rpx;color: #333333;margin-top: 40rpx;">教练风采</text>
		<!-- 教练风采图片 -->
		<view style="width: 702rpx;display: flex;justify-content: space-between;margin-top: 40rpx;">
			<image mode="aspectFill" :src="item" style="width: 224rpx;height: 200rpx;" v-for="(item, index) in teachierData.more" :key="index"></image>
		</view>
		<!-- 分割线 -->
		<view style="width: 100%;height: 2px;background-color: #F0F2F5;margin-top: 40rpx;"></view>
		<!-- 自我介绍标题 -->
		<text style="width: 702rpx; font-size: 34rpx;color: #333333;margin-top: 40rpx;">教练风采</text>
		<!-- 自我介绍富文本 -->
		<rich-text :nodes="wonderful_moment" style="width: 702rpx; margin-top: 35rpx;"></rich-text>
		<!-- <rich-text nodes="<p>xxx</p>" style="width: 702rpx; margin-top: 35rpx;"></rich-text> -->
		<!-- 占位用 -->
		<view style="width: 1rpx;height: 100rpx;background-color: #FFFFFF;"></view>

		<!-- 预约按钮 -->
		<view
			@click="pay()"
			style="background-color: #3187FB; width: 100%;height: 100rpx;position: fixed;bottom: 0px;text-align: center;
		color: #FFFFFF;font-size: 30rpx;line-height: 100rpx;"
		>
			预约
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			rateCount: 5,
			context: '<div>112211</div>',
			/**
			 * id教练信息文章id
			 * post_title教练姓名
			 * post_keywords教练标签
			 * thumbnail教练头像
			 * more教练风采
			 * star星级
			 * driver_school所属驾校
			 * subject_id所授科目id
			 * subject_name所授科目
			 * wonderful_moment教练简介
			 * post_cost预约需支付金额
			 * dk_money定金可抵扣多少元
			 */
			wonderful_moment: '',
			teachierData: {},
		};
	},
	onLoad() {
		this.id = this.$Route.query.id;
		this.getContext(this.id);
	},
	methods: {
		// 获取教练数据
		async getContext(id) {
			let res;
			try {
				res = await this.$request.get('api/Home/teachtor_detial', {
					data: {
						article_teachid: id,
					},
				});
			} catch (e) {
				//TODO handle the exception
				return uni.showToast({
					title: '网络连接失败！',
					icon: 'none',
				});
			}

			console.log('res', res);
			this.teachierData = res.data.data;
			this.wonderful_moment = res.data.data.wonderful_moment
				.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/gi, '<p')
				.replace(/<p>/gi, '<p style="font-size: 15px; line-height: 25px;">')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/gi, '<img$1')
				.replace(/<img([\s\w"-=\/\.:;]+)/gi, '<img style="width: 80vw;" $1');
			console.log('this.wonderful_moment :>> ', this.wonderful_moment);
		},
		//预约教练
		pay() {
			this.$Router.push({
				name: 'baoming',
				params: {
					id: this.id,
					name: this.teachierData.post_title,
					zhiwu: this.teachierData.zhiwu,
					post_cost: this.teachierData.post_cost,
				},
			});
		},
	},
};
</script>

<style lang="scss"></style>
